import React, { Component } from 'react';
import {
  Form,
  Input,
  Table,
  Button,
  Tag,
  Modal,
  Radio,
  Row,
  Divider,
  Col,
  Alert,
  DatePicker,
  Popconfirm,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import Add from './add';
import Edit from './edit';
import { connect } from 'dva';

@connect(({ person }: any) => ({
  datasource: person.list,
  total: person.total,
  isRefresh: person.isRefresh,
}))
class Index extends Component<any, any> {
  state = {
    selectDate: 'day',
    visible: false,
    edit: false,
    size: 10,
    currentPage: 1,
    comments: '',
  };
  componentDidMount() {
    // this.handleSearch();
    this.props.dispatch({
      type: 'person/reFresh',
      payload: true,
    });
  }
  componentDidUpdate() {
    const { isRefresh } = this.props;
    if (isRefresh) {
      setTimeout(() => {
        this.handleSearch();
      }, 200);
    }
  }
  handleSearch = () => {
    const { dispatch } = this.props;
    const { size, currentPage, comments } = this.state;
    dispatch({
      type: 'person/list',
      payload: {
        comments,
        size: size,
        page: currentPage,
      },
    });
  };
  handlSelect = e => {
    this.setState({ selectDate: e.target.value });
  };
  handleOpenModal = e => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    this.formRef.handleSubmit();
  };
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };
  render() {
    const { selectDate, visible, edit, size, currentPage } = this.state;
    const { datasource, total, isRefresh } = this.props;
    const columns = [
      {
        title: '序号',
        align: 'center',
        render: (text, record, index) => `${index + 1}`,
      },
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '电话号码',
        dataIndex: 'phoneNumber',
        align: 'center',
      },
      {
        title: '描述',
        dataIndex: 'comments',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        render: (text: any, record: any, index: any) => {
          const id = record.id;
          return (
            <span>
              <a
                onClick={() => {
                  this.setState(
                    {
                      edit: true,
                    },
                    () => {
                      this.props.dispatch({
                        type: 'person/view',
                        payload: record,
                      });
                    },
                  );
                }}
              >
                修改
              </a>
              <Divider type="vertical" />
              <Popconfirm
                title="你确定要删除该条信息嘛？"
                onConfirm={() => {
                  this.props.dispatch({
                    type: 'person/delete',
                    payload: { ids: id },
                  });
                }}
                onCancel={() => {}}
                okText="Yes"
                cancelText="No"
              >
                <a href="#">删除</a>
              </Popconfirm>
            </span>
          );
        },
      },
    ];

    return (
      <PageHeaderWrapper>
        <div style={{ paddingLeft: '22px', marginBottom: '6px' }}>
          <Form layout="inline">
            <Form.Item label="工作人员">
              <Input
                onChange={(e: any) => {
                  this.setState({
                    comments: e.target.value,
                    page: 1,
                  });
                }}
                placeholder="请输入姓名或手机号"
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                onClick={() => {
                  this.props.dispatch({
                    type: 'person/reFresh',
                    payload: true,
                  });
                }}
                style={{ marginRight: '14px' }}
              >
                搜索
              </Button>
              <Button type="primary" onClick={this.handleOpenModal}>
                新增
              </Button>
            </Form.Item>
          </Form>
        </div>

        <div style={{ background: '#fff' }}>
          <Table
            bordered
            columns={columns}
            dataSource={datasource}
            loading={isRefresh}
            size="middle"
            pagination={{
              pageSizeOptions: ['10', '20', '30', '40'],
              showSizeChanger: true,
              total: total,
              pageSize: size,
              current: currentPage,
              onChange: (page: any, pageSize: any) => {
                this.setState(
                  {
                    currentPage: page,
                  },
                  () => {
                    this.handleSearch();
                  },
                );
              },
              onShowSizeChange: (current: any, size: any) => {
                this.setState(
                  {
                    size: size,
                  },
                  () => {
                    this.handleSearch();
                  },
                );
              },
            }}
          />
        </div>

        <Modal
          title="新增"
          visible={visible}
          destroyOnClose
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Add
            close={this.handleCancel}
            submit={(data: any) => {
              this.props.dispatch({
                type: 'person/add',
                payload: data,
              });
            }}
            wrappedComponentRef={(form: any) => (this.formRef = form)} //5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）
          />
        </Modal>
        <Modal
          title="修改"
          visible={edit}
          destroyOnClose
          onOk={() => {
            this.editRef.handleSubmit();
          }}
          onCancel={() => {
            this.setState({
              edit: false,
            });
          }}
        >
          <Edit
            close={() => {
              this.setState({
                edit: false,
              });
            }}
            submit={(data: any) => {
              this.props.dispatch({
                type: 'person/put',
                payload: data,
              });
            }}
            wrappedComponentRef={form => (this.editRef = form)} //5、使用wrappedComponentRef 拿到子组件传递过来的ref（官方写法）
          />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
